---
breakpoint: tablet
title: Breakpoints
path: /breakpoints/
---

# Breakpoints

Bumbag comes with 5 defined breakpoints & their ranges:

| Breakpoint       | Width            |
| ---------------- | ---------------- |
| `mobile`         | 480px            |
| `tablet`         | 768px            |
| `desktop`        | 1024px           |
| `widescreen`     | 1200px           |
| `fullHD`         | 1440px           |
| `min-mobile`     | 0px and above    |
| `max-mobile`     | 479px and below  |
| `min-tablet`     | 480px and above  |
| `max-tablet`     | 767px and below  |
| `min-desktop`    | 768px and above  |
| `max-desktop`    | 1023px and below |
| `min-widescreen` | 1024px and above |
| `max-widescreen` | 1199px and below |
| `min-fullHD`     | 1200px and above |
| `max-fullHD`     | 1440px and below |

## Adding breakpoints to the theme

You are able to add your own breakpoints to the [global theme](/theming):

```jsx
import { Provider } from 'bumbag';

const theme = {
  breakpoints: {
    custom: 1000
  }
}

<Provider theme={theme}>Hello world!</Provider>
```

## Using breakpoints

### With style props

```jsx-live
<Box fontSize={{ default: '16px', 'max-tablet': '14px' }}>
  Hello world
</Box>
```

### With `applyTheme`

You can set attribute values for certain breakpoints by specifying an object of breakpoint/value pairs:

```function-live noInline
const FancyBox = applyTheme(Box, {
  styles: {
    base: {
      color: 'red',
      fontSize: { default: '16px', 'max-tablet': '14px' }
    }
  }
})

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(Example)
```

### With `styled`

```function-live noInline
const FancyBox = styled(Box)`
  color: red;
  font-size: 16px;

  ${breakpoint('max-tablet', css`
    font-size: 14px;
  `)}
`;

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(Example)
```

## Theming

### Schema

```js
const theme = {
  breakpoints: {
    mobile: string,
    tablet: string,
    desktop: string,
    widescreen: string,
    fullHD: string,

    // Plus your own definitions...
    [key: string]: string,
    // e.g. custom: 1000
  }
}
```
